<!--
 * @Author: Christion.Young
 * @Date: 2020-11-04 19:43:11
 * @LastEditors: zhangjingyu
 * @LastEditTime: 2021-01-04 13:49:30
 * @Description: 准备金
-->
<template>
    <div>
        <el-row>
            <el-col>
                <!-- 操作区域 -->
                <upper-template @search="queryBtn"
                                @clear="resetBtn">
                    <!-- 操作按钮区 -->
                    <template slot="buttonArea">
                        <el-button @click="addFunc">新增</el-button>
                        <el-button @click="editFunc">编辑</el-button>
                        <el-button @click="delFunc">删除</el-button>
                    </template>
                    <!-- 搜索区 -->
                    <template slot="searchArea">
                        <el-form :model="searchForm"
                                 ref="searchForm"
                                 label-width="90px"
                                 label-position="left"
                                 size="mini">
                            <el-form-item label="币种：">
                                <el-select v-model="searchForm.currencyCode"
                                           style="width:100%;"
                                           placeholder="请选择币种">
                                    <el-option v-for="item in currencyOptionList"
                                               :key="item.currencyCode"
                                               :label="item.currencyCode"
                                               :value="item.currencyCode"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="生效日期：">
                                <el-date-picker v-model="searchForm.effectDate"
                                                type="date"
                                                style="width:100%;"
                                                placeholder="请选择生效日期"
                                                value-format="yyyy-MM-dd"></el-date-picker>
                            </el-form-item>
                            <el-form-item label="余额类型：">
                                <el-select v-model="searchForm.balancesType"
                                           placeholder="请选择余额类型"
                                           style="width:100%;">
                                    <el-option v-for="item in balancesTypeOptionList"
                                               :key="item.value"
                                               :label="item.label"
                                               :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                    </template>
                    <!-- 显示隐藏区 -->
                    <template slot="columnHide">
                        <el-checkbox-group v-model="checkList">
                            <el-checkbox v-for="item in textData"
                                         :label="item.label"
                                         :key="item.prop">{{ item.label }}
                            </el-checkbox>
                        </el-checkbox-group>
                    </template>
                </upper-template>
                <!-- 列表 -->
                <el-table ref="multipleTable"
                          :data="tableData"
                          stripe
                          @row-click="authorizeFor">
                    <el-table-column width="55"
                                     type="selection"
                                     ></el-table-column>
                    <el-table-column prop="currencyCode"
                                     label="币种"
                                     v-if="columnState[0]">
                    </el-table-column>
                    <el-table-column prop="money"
                                     label="金额(元)"
                                     align="right"
                                     v-if="columnState[1]">
                    </el-table-column>
                    <el-table-column prop="dataDate"
                                     label="数据日期"
                                     :formatter="
              row => (row.dataDate ? setCalendarDate(row.dataDate) : '-')
            "
                                     v-if="columnState[2]">
                    </el-table-column>
                    <el-table-column prop="balancesType"
                                     label="余额类型"
                                     :formatter="v => $getLabel(v.balancesType, balancesTypeOptionList)"
                                     show-overflow-tooltip 
                                     v-if="columnState[3]">
                    </el-table-column>
                    <el-table-column prop="effectDate"
                                     label="生效日期"
                                     show-overflow-tooltip 
                                     :formatter="
              row => (row.effectDate ? setCalendarDate(row.effectDate) : '-')
            "
                                     v-if="columnState[4]">
                    </el-table-column>
                    <el-table-column prop="invalidDate"
                                     label="失效日期"
                                     show-overflow-tooltip 
                                     :formatter="
              row => (row.invalidDate ? setCalendarDate(row.invalidDate) : '-')
            "
                                     v-if="columnState[5]">
                    </el-table-column>
                    <el-table-column prop="creator"
                                     label="创建人"
                                     :formatter="row => row.creator || '-'"
                                     v-if="columnState[6]">
                    </el-table-column>
                    <el-table-column prop="createdTm"
                                     label="创建时间"
                                     show-overflow-tooltip 
                                     :formatter="
              row => (row.createdTm ? setCalendarDate(row.createdTm) : '-')
            "
                                     v-if="columnState[7]">
                    </el-table-column>
                    <el-table-column prop="modifier"
                                     label="修改人"
                                     :formatter="row => row.modifier || '-'"
                                     v-if="columnState[8]">
                    </el-table-column>
                    <el-table-column prop="modifiedTm"
                                     label="修改时间"
                                     show-overflow-tooltip 
                                     :formatter="
              row => (row.modifiedTm ? setCalendarDate(row.modifiedTm) : '-')
            "
                                     v-if="columnState[9]">
                    </el-table-column>
                </el-table>
                <!-- 分页 -->
                <pagination @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            @refresh="searchFunc"
                            :current-page="searchForm.page"
                            :page-size="searchForm.size"
                            :total="total"></pagination>
            </el-col>
        </el-row>
        <!-- 新增/编辑 -->
        <el-dialog v-dialogDrag
                   :title="saveTitles[saveFlg - 1] + '准备金'"
                   :visible.sync="addOrEdit"
                   width="560px"
                   top="5%">
            <el-form :model="saveForm"
                     ref="addTreeForm"
                     label-width="100px"
                     label-position="right"
                     :rules="saveFormRules">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="币种："
                                      prop="currencyCode">
                            <el-select v-model="saveForm.currencyCode"
                                       style="width:420px;">
                                <el-option v-for="item in currencyOptionList"
                                           :key="item.currencyCode"
                                           :label="item.currencyCode"
                                           :value="item.currencyCode"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="数据日期："
                                      prop="dataDate">
                            <el-date-picker v-model="saveForm.dataDate"
                                            type="date"
                                            style="width:420px;"
                                            value-format="yyyy-MM-dd"
                                            format="yyyy-MM-dd"></el-date-picker>
                        </el-form-item>
                        <el-form-item label="余额类型："
                                      prop="balancesType">
                            <el-select v-model="saveForm.balancesType"
                                       style="width:420px;">
                                <el-option v-for="item in balancesTypeOptionList"
                                           :key="item.value"
                                           :label="item.label"
                                           :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="金额(元)："
                                      prop="money">
                            <el-input v-model.trim="saveForm.money"></el-input>
                        </el-form-item>
                        <el-form-item label="生效日期："
                                      prop="effectDate">
                            <el-date-picker v-model="saveForm.effectDate"
                                            type="date"
                                            value-format="yyyy-MM-dd"
                                            style="width:420px;"
                                            format="yyyy-MM-dd"></el-date-picker>
                        </el-form-item>
                        <el-form-item label="失效日期："
                                      prop="invalidDate">
                            <el-date-picker v-model="saveForm.invalidDate"
                                            type="date"
                                            style="width:420px;"
                                            value-format="yyyy-MM-dd"
                                            format="yyyy-MM-dd"></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer">
                <el-button @click="confirmTne">确 定</el-button>
                <el-button @click="cancelTne">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { publicManage_dat } from '@/api/index'
import moment from 'moment'
export default {
    data() {
        return {
            addOrEdit: false,
            total: 50,
            saveFlg: 1,
            saveTitles: ['新增', '编辑'],
            searchForm: {
                currencyCode: '',
                effectDate: '',
                balancesType: '',
                page: 1,
                size: 15,
            },
            saveForm: {
                money: '',
                dataDate: '',
                balancesType: '',
                currencyCode: '',
                effectDate: '',
                invalidDate: '',
            },
            saveFormRules: {
                creator: [
                    {
                        required: true,
                        message: '该输入项为必输项',
                        trigger: 'blur',
                    },
                ],
                money: [
                    {
                        required: true,
                        message: '该输入项为必输项',
                        trigger: 'blur',
                    },
                    {
                        pattern: /^\d+(\.\d{1,4})?$/,
                        message: '该输入项只能输入数值,小数点后最多4位',
                        trigger: 'blur',
                    },
                    {
                        validator: this.validatorMoney,
                        trigger: 'blur',
                    },
                ],
                dataDate: [
                    {
                        required: true,
                        message: '该输入项为必输项',
                        trigger: 'blur',
                    },
                ],
                balancesType: [
                    {
                        required: true,
                        message: '该输入项为必输项',
                        trigger: 'blur',
                    },
                ],
                currencyCode: [
                    {
                        required: true,
                        message: '该输入项为必输项',
                        trigger: 'blur',
                    },
                ],
                effectDate: [
                    {
                        required: true,
                        message: '该输入项为必输项',
                        trigger: 'blur',
                    },
                    { validator: this.effectValidator, trigger: 'blur' },
                ],
                invalidDate: [
                    {
                        required: true,
                        message: '该输入项为必输项',
                        trigger: 'blur',
                    },
                    { validator: this.invalidValidator, trigger: 'blur' },
                ],
            },
            checkList: [
                '币种',
                '金额(元)',
                '数据日期',
                '余额类型',
                '生效日期',
                '失效日期',
                '创建人',
                '创建时间',
                '修改人',
                '修改时间',
            ],
            textData: [
                { prop: 'currencyCode', label: '币种' },
                { prop: 'money', label: '金额(元)' },
                { prop: 'dataDate', label: '数据日期' },
                { prop: 'balancesType', label: '余额类型' },
                { prop: 'effectDate', label: '生效日期' },
                { prop: 'invalidDate', label: '失效日期' },
                { prop: 'creator', label: '创建人' },
                { prop: 'createdTm', label: '创建时间' },
                { prop: 'modifier', label: '修改人' },
                { prop: 'modifiedTm', label: '修改时间' },
            ],
            tableData: [],
            currencyOptionList: [],
            balancesTypeOptionList: [
                { value: '0', label: '准备金账户余额补录' },
                { value: '1', label: '法定存款准备金余额补录' },
                { value: '2', label: '目标超越备付金余额' },
            ],
        }
    },
    created() {
        this.searchFunc()
        this.queryAWOutDefault()
    },
    computed: {
        columnState() {
            let arr = [],
                arr1 = this.textData,
                arr2 = this.checkList
            for (let i = 0; i < arr1.length; i++) {
                let flg = false
                for (let j = 0; j < arr2.length; j++) {
                    if (arr1[i].label === arr2[j]) {
                        flg = true
                    }
                }
                arr.push(flg)
            }
            return arr
        },
    },
    mounted() {},
    watch: {
        addOrEdit() {
            // 窗口打开或关闭清除校验结果
            if (this.$refs.addTreeForm) {
                this.$refs.addTreeForm.clearValidate()
            }
        },
    },
    methods: {
        validatorMoney(rule, value, callback) {
            if (value === '') {
                callback(new Error('该输入项为必输项'))
            } else if (value < 0 || value > 99999999) {
                callback(new Error('输入数值，最大99999999'))
            } else {
                callback()
            }
        },
        addFunc() {
            this.saveFlg = 1
            for (let k in this.saveForm) {
                this.saveForm[k] = ''
            }
            this.addOrEdit = true
        },
        editFunc() {
            this.saveFlg = 2
            let selection = this.$refs.multipleTable.selection
            if (selection.length != 1) {
                return this.$message.warning('请选择一条数据进行修改')
            }
            let row = selection[0]
            let form = { ...row }

            this.saveForm = {
                money: form.money,
                dataDate: this.setCalendarDate(form.dataDate),
                balancesType: form.balancesType,
                currencyCode: form.currencyCode,
                effectDate: this.setCalendarDate(form.effectDate),
                invalidDate: this.setCalendarDate(form.invalidDate),
                reserveId: form.reserveId,
            }
            this.addOrEdit = true
        },
        delFunc() {
            let selection = this.$refs.multipleTable.selection
            if (selection.length < 1) {
                return this.$message.warning('请选择要删除的数据')
            }
            this.$confirm('您确定要删除选中数据吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    const paramData = []
                    selection.forEach((element) => {
                        paramData.push(element.reserveId)
                    })
                    publicManage_dat
                        .dimReservesRatioRemove({ ids: paramData })
                        .then((res) => {
                            if (res.code == 200) {
                                this.$message({
                                    type: 'success',
                                    message: '删除成功',
                                })
                                this.searchFunc()
                            } else {
                                this.$message.error(res.message)
                            }
                        })
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除',
                    })
                })
        },
        //搜索操作按钮
        queryBtn() {
            this.searchForm.page=1;
            this.searchFunc()
        },
        resetBtn() {
            this.searchForm = {
                entityCode: '',
                referenceColumnName: '',
                referenceTableName: '',
            }
        },
        //新增编辑确定取消
        confirmTne() {
            this.$refs.addTreeForm.validate((valid) => {
                if (valid) {
                    publicManage_dat
                        .dimReservesRatioSave(this.saveForm)
                        .then((res) => {
                            if (res.code == 200) {
                                this.$message({
                                    type: 'success',
                                    message: '保存成功',
                                })
                                this.searchFunc()
                                this.addOrEdit = false
                            } else {
                                this.$message.error(res.message)
                            }
                        })
                }
            })
        },
        cancelTne() {
            this.addOrEdit = false
        },
        //点击行选中
        authorizeFor(row) {
            if (this.$refs.multipleTable) {
                this.$refs.multipleTable.clearSelection()
            }
            this.$refs.multipleTable.toggleRowSelection(row, true)
        },
        //分页
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`)
            this.searchForm.size = val
            this.searchFunc()
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`)
            this.searchForm.page = val
            this.searchFunc()
        },
        //查询
        searchFunc() {
            publicManage_dat
                .dimReservesRatioQueryForPage(this.searchForm)
                .then((res) => {
                    if (res.code == 200) {
                        this.tableData = res.data
                        this.total = res.count
                        console.log(res)
                    } else {
                        this.$message.error(res.message)
                    }
                })
        },
        //日期数据处理
        setCalendarDate(val) {
            if (val) return moment(val).format('YYYY-MM-DD')
            else return ''
        },
        //币种
        queryAWOutDefault() {
            publicManage_dat.queryAllCurrecyWithOutDefault().then((res) => {
                this.currencyOptionList = res
            })
        },
        effectValidator(rule, value, callback) {
            //如果失效日期存在
            if (this.saveForm.invalidDate) {
                if (
                    new Date(this.saveForm.invalidDate).getTime() >
                    new Date(value).getTime()
                ) {
                    callback()
                } else {
                    callback(new Error('失效日期不能小于生效日期'))
                }
            } else {
                callback()
            }
        },
        invalidValidator(rule, value, callback) {
            if (this.saveForm.effectDate) {
                if (
                    new Date(this.saveForm.effectDate).getTime() >
                    new Date(value).getTime()
                ) {
                    callback(new Error('生效日期不能大于失效日期'))
                } else {
                    callback()
                }
            } else {
                callback()
            }
        },
    },
}
</script>
<style lang="scss" scoped>
</style>